<template>
	<view>
		<view class="header">
			<view class="searchView">
				<u-search placeholder="请输入商品名称" v-model="foodName" :clearabled="false" :showAction="false">
				</u-search>
				<view class="searchBtn" @click="search">搜索</view>
			</view>
		</view>
		<view class="main">
			<view class="main-content">
				<view class="left">
					<view @click="detail(item)" class="left-box" v-for="(item, index) in left" :key="index"
						:style="{ Height: item.height + 'vw', background: '#fff' }">
						<view :style="{ Width: '100%', Height: item.height * 0.8 + 'vw' }">
							<!-- <img :src="item.img" :style="{ Width: '100%', height: '100%' }" alt="" /> -->
							<image :src="item.img" :style="{width:'47vw',height:item.height*0.8+'vw'}" mode=""></image>
						</view>
						<view class="showDiv" :style="{ width: '100%', Height: item.height * 0.2 + 'vw' }">
							<view style="width: 30%;">
								<span style="color: red;font-size: 20rpx;">￥</span>
								<span style="font-size: 30rpx;font-weight: bold;color: red;">{{ item.foodPrice }}</span>
							</view>
							<view style="width: 40%;">
								<span style="font-weight: bolder;font-size: 20rpx;">{{ item.foodName }}</span>
							</view>
							<view style="width: 30%;">
								<span style="font-size: 22rpx;font-weight: bold;">{{ item.formUser }}</span>
							</view>
						</view>
					</view>
				</view>
				<view class="right">
					<view @click="detail(item)" class="right-box" v-for="(item, index) in right" :key="index"
						:style="{ Height: item.height + 'vw', background: '#fff' }">
						<view :style="{ Width: '100%', Height: item.height * 0.8 + 'vw' }">
							<!--  <img :src="item.img" :style="{ Width: '100%', height: '100%' }" alt="" /> -->
							<image :src="item.img" :style="{width:'47vw',height:item.height*0.8+'vw'}" mode=""></image>
						</view>
						<view class="showDiv" :style="{ width: '100%', Height: item.height * 0.2 + 'vw' }">
							<view style="width: 30%;">
								<span style="color: red;font-size: 20rpx;">￥</span>
								<span style="font-size: 30rpx;font-weight: bold;color: red;">{{ item.foodPrice }}</span>
							</view>
							<view style="width: 40%;">
								<span style="font-weight: bolder;font-size: 20rpx;">{{ item.foodName }}</span>
							</view>
							<view style="width: 30%;">
								<span style="font-size: 22rpx;font-weight: bold;">{{ item.formUser }}</span>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
		<view style="padding-bottom: 7vh;">
			<u-loading-icon text="加载中" textSize="18" :show="show"></u-loading-icon>
			<view class="bottom-span" v-if="left.length + right.length == dataTotal && this.show == false">
				到底了~~
			</view>
		</view>

	</view>
</template>

<script>
	import {
		getImgLink,
		guard
	} from "@/ww.js"
	export default {
		data() {
			return {
				foodName: '', //搜索参数
				sort: 1, //初始值
				count: 10, //条目数
				right: [], //右侧数组
				left: [], //左侧数组
				leftHeight: 0, //初始 左边
				rightHeight: 0, //初始 右边
				show: false,
				dataTotal: 0, //总数
				food: '',
				token: ''
			}
		},
		onReachBottom() {
			this.show = true
			this.sort = this.sort + 1
			setTimeout(() => {
				this.show = false
				this.search()
			}, 2000)
		},
		onLoad() {
			guard('../login/login')
			this.token = uni.getStorageSync("token").token
		},
		methods: {
			async search() {
				if (this.token) {
					if (this.food != this.foodName) {
						this.left = [],
							this.right = [],
							this.sort = 1
					}
					let formData = {
						sort: this.sort,
						count: this.count,
					}
					this.food = this.foodName
					formData.foodName = this.food
					const data = await getImgLink(formData)
					if (data.code == 200) {
						this.dataTotal = Number(data.data.total)
						this.putObjHeight(data.data.result)
						//数据大于5时
						if (data.data.result.length > 5) {
							this.left = [...this.left, ...data.data.result.slice(0, 5)]
							this.right = [...this.right, ...data.data.result.slice(5, data.data.result
								.length)]
						}
						//数据小于5
						else {
							this.left = [...this.left, ...data.data.result.slice(0, 2)]
							this.right = [...this.right, ...data.data.result.slice(2, data.data.result
								.length)]
						}
					}
				} else {
					uni.reLaunch({
						url: '/pages/login/login'
					})
				}
			},
			//每请求一次添加高度
			putObjHeight(e) {
				let arr = []
				let left1 = [] // 左侧
				let right1 = [] //右侧
				for (let i = 0; i < this.count; i++) {
					let nums = Math.floor(Math.random() * (60 - 45 + 1)) + 45;
					if (this.leftHeight <= this.rightHeight) {
						this.leftHeight += nums
						left1.push(nums)
					} else {
						this.rightHeight += nums
						right1.push(nums)
					}
				}
				arr = [...left1, ...right1]
				e.forEach((el, i) => {
					arr.forEach((ele, ind) => {
						if (i == ind) {
							el.height = ele
						}
					})
				})
			},
			detail(e) {
				if (this.token) {
					uni.navigateTo({
						url: "/pages/index/commodity/commodity?item=" + encodeURIComponent(JSON.stringify(e))
					})
				} else {
					uni.reLaunch({
						url: '/pages/login/login'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		width: 100vw;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #fff;


		.searchButton {
			margin: 0 0 0 1vw;
		}
	}

	.searchView {
		width: 60vw !important;
		padding: 1vh 0;
		position: relative;


		::v-deep .u-search {
			width: 47vw;
		}

		::v-deep .u-search__content__input {
			text-align: center !important;
		}

		::v-deep .u-search__content {
			height: 6vw;
			display: flex;
			justify-content: center;
		}



		::v-deep .u-search__content__icon {
			display: none;
		}
	}

	.searchBtn {
		width: 20%;
		height: 50%;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 2%;
		font-size: 22rpx;
		padding: 0.2vh 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #00bfff;
		color: #fff;
		border-radius: 22rpx;
		z-index: 100;
	}

	.content {
		background: #F1F1F1;
		width: 100vw;
	}

	.header {
		width: 100vw;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #fff;

		::v-deep .u-button {
			width: 70rpx;
			height: 40rpx;
			background-color: #00bfff;
			border: none;
		}

		.searchButton {
			margin: 0 0 0 1vw;
		}
	}



	.main {
		width: 100vw;
		padding-bottom: 2vh;
	}

	.main-content {
		width: 96vw;
		margin: 1vh auto;
		display: flex;
		background-color: rgb(240, 240, 240);
	}

	.left {
		width: 47vw;

		.left-box:first-child {
			width: 47vw;
		}

		.left-box:nth-child(n+2) {
			width: 47vw;
			margin: 1vh 0 0 0;
		}
	}

	.right {
		width: 47vw;
		margin: 0 0 0 2vw;

		.right-box:first-child {
			width: 47vw;
		}

		.right-box:nth-child(n+2) {
			width: 47vw;
			margin: 1vh 0 0 0;
		}
	}

	///左右showDiv
	.showDiv {
		display: flex;

		&>view {
			display: flex;
			justify-content: center;
			align-items: center;
		}

		&>view>span {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}

	//触底文字
	.bottom-span {
		width: 100%;
		color: black;
		font-size: 28rpx;
		display: flex;
		justify-content: center;
		padding: 0 0 0.5vh 0;
	}
</style>